<template>
	<view class="seckill">
		<cu-custom :logo="logo" :bg="bg" :style="logoStyle"></cu-custom>
		<view class="countdown">
			<text>距本场结束</text>
			<countdown @Transmit="handle" :startTime="startTime" :endTime="enTime" />
		</view>
		<view class="list">
			<view class="cell" v-for="(item,index) in groupShopList" :key="index">
				<view class="cell-shop">
					<image class="cell-shopImg" :src="item.img" mode=""></image>
					<view class="zhezhao" v-if="item.stock == 0"><text class="name">已售空</text></view>
				</view>
				<view class="cell-right">
					<view class="title">
						{{item.title}}
					</view>
					<view class="price-line">
						<image class="priceUp" src="../static/priceUp.png" mode=""></image>
						<view class="flex1">
							<text>原价</text>
							<text>￥{{item.originalPrice / 100}}</text>
						</view>
						<view class="flex1">
							<text>秒杀价</text>
							<view class="message">
								{{ (item.minPrice / 100).toFixed(2) }}
							</view>
						</view>
						<view class="flex1">
							<text>即将恢复</text>
							<text>￥{{item.originalPrice / 100}}</text>
						</view>
					</view>
					<view class="test-bottom">
						<view class="jindu">
							<view class="jindutiao">
								<view :class="progress" :style="{ width: '50%'}"></view>
							</view>
							<view class="namea">热卖中</view>
						</view>
						<view style="display: flex; align-items: center;">
							<image src="../static/btnq.png" mode="" @click="handleCountClick(item)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="guid"></view>
		<!-- <cards :num="num"></cards> -->
		<!-- <view class="cart">
			<view class="cart-s">
				<image src="../static/cartTest.png" mode=""></image>
				<view class="alarm" v-if="num>0">
					{{num}}
				</view>
			</view>
		</view> -->
		<bottom v-model="num"></bottom>
	</view>
</template>

<script>
	import cuCustom from './components/cabar.vue'
	import countdown from '@/components/cz-countdown/cz-countdown.vue';
	import bottom from './components/bottom.vue'
	import cards from './components/cards.vue'
	export default {
		components: {
			cuCustom,
			countdown,
			bottom,
			cards
		},
		data() {
			return {
				num: 0,
				progress: 'jindushangshi',
				bg: require('../static/bg3.png'),
				logo: require('../static/seckillLogo.png'),
				logoStyle: {
					width: '225rpx',
					height: '58rpx'
				},
				pageNo: 1,
				groupShopList: [],
				loadingType: 'more',
				startTime: '2020-01-01 00:00:00',
				enTime: '2020-01-01 00:00:10',
				groupShopList: [],
			}
		},
		onLoad() {
			var timestamp = new Date().getTime();
			this.startTime = this.formatDate(timestamp);
			console.log('当前时间', this.startTime);
			this.loadData('refresh');
			this.init()
		},
		methods: {
			init() {
				this.$api
					.request('cart', 'countCart')
					.then(res => {
						this.num = res.data
						if (res.data > 0) {
							uni.setTabBarBadge({
								index: 2,
								text: res.data + ''
							})
						} else if (res.data <= 0) {
							uni.removeTabBarBadge({
								index: 2
							})
						}
						this.$store.commit('addCart', res.data)
					});
			},
			handleCountClick(item) {
				if (parseInt(item.stock) <= 0) {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '库存不足了'
					});
					return
				}
				this.$api
					.request('cart', 'addCartItem', {
						skuId: item.skuId,
						num: 1
					})
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '添加购物车成功'
						})
						this.init()
					});
			},
			//获取收藏列表
			loadData(type) {
				const that = this;
				if (type === 'refresh') {
					that.pageNo = 1;
					that.groupShopList = [];
					that.loadingType = 'more';
				}
				if (that.loadingType == 'more') {
					that.loadingType = 'loading';
					that.$api
						.request('groupshop', 'getGroupShopPage', {
							pageNo: that.pageNo,
							pageSize: 1000,
							storageId: this.$store.state.storageId
						})
						.then(res => {
							that.pageNo = res.data.pageNo + 1;
							that.loadingType = res.data.pageNo < res.data.totalPageNo ? 'more' : 'nomore';
							res.data.items.forEach(item => {
								that.groupShopList.push(item);
							});
							console.log(this.groupShopList)
							// console.log('结束时间',that.formatDate(res.data.items[0].gmtEnd) )
							if (res.data.items.length > 0) {
								that.enTime = that.formatDate(res.data.items[0].gmtEnd);
							}

							if (type === 'refresh') {
								uni.stopPullDownRefresh();
							}
						});
				}
			},
			//时间戳转换
			formatDate(date) {
				var date = new Date(date);
				var YY = date.getFullYear() + '-';
				var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return YY + MM + DD + ' ' + hh + mm + ss;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.margin-top {
		margin-top: 20rpx;
	}

	.seckill {
		background-color: #f9f9f9;
		min-height: 100vh;

		.countdown {
			margin-top: -100rpx;
			position: relative;
			z-index: 3;
			display: flex;
			justify-content: center;
			color: #FFFFFF;
			align-items: center;
		}

		/deep/ .time {
			background-color: rgba(220, 38, 38, 0);
		}

		/deep/ .text {
			color: #FFFFFF;
		}

		.list {
			margin-top: 40rpx;
			background-color: #f9f9f9;

			.cell {
				background-color: #FFFFFF;
				border-radius: 20rpx;
				width: 700rpx;
				margin: 20rpx auto 0 auto;
				display: flex;
				padding: 20rpx;
				height: 264rpx;

				&-shop {
					position: relative;

					.zhezhao {
						position: absolute;
						top: 0;
						background: rgba(0, 0, 0, 0.5);
						width: 200rpx;
						height: 200rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.name {
							font-size: 36rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: #ffffff;
						}
					}
				}

				&-shopImg {
					width: 200rpx;
					height: 200rpx;
				}

				&-right {
					margin-left: 20rpx;
				}

				.title {
					color: #000000;
					font-weight: bold;
					font-size: 32rpx;
				}
			}
		}

		.price-line {
			display: flex;
			position: relative;
			width: 436rpx;
			margin-top: 20rpx;
			height: 100rpx;



			.flex1 {

				display: flex;
				flex-direction: column;

				&:nth-child(2) {
					justify-content: flex-end;
					align-items: center;
					color: #999999;
					font-size: 20rpx;
					min-width: 90rpx;

					text {
						&:nth-child(2) {
							padding-top: 5rpx;
							text-decoration: line-through;
						}
					}
				}

				&:nth-child(3) {
					flex: 1;
					align-items: center;
					color: #36B542;
					font-size: 20rpx;
				}

				&:last-child {
					justify-content: flex-end;
					align-items: center;
					color: #999999;
					color: #999999;
					font-size: 20rpx;
					min-width: 98rpx;

					text {
						&:nth-child(2) {
							padding-top: 5rpx;
							text-decoration: line-through;
						}
					}
				}

				$bg:#36B542;

				.message {
					min-width: 100rpx;
					margin-top: 5rpx;
					background-color: $bg;
					border-bottom-color: $bg;
					color: #000000;
					font-size: 22rpx;
					font-weight: bold;
					line-height: 32rpx;
					padding: 2rpx 4rpx;
					box-sizing: border-box;
					border-radius: 15px;
					letter-spacing: 1rpx;
					position: relative;
					word-break: break-all;
					color: #FFFFFF;
					text-align: center;


					&::before {
						content: '';
						position: absolute;
						bottom: 12rpx;
						left: 50%;
						width: 15rpx;
						height: 15rpx;
						// border-radius: 5rpx;
						margin-bottom: -9px;
						background: inherit;
						/*自动继承父元素的背景*/
						transform: translateX(-50%) rotate(45deg);
					}
				}
			}
		}

		.jindu {
			margin-top: 20rpx;
			height: 40rpx;
			display: flex;
			align-items: center;

			.namea {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #36B542;
			}

			.jindutiao {
				width: 140rpx;
				height: 24rpx;
				background: #9adaa0;
				border-radius: 16rpx;
				margin-right: 16rpx;
				position: relative;
				overflow: hidden;
				text-align: center;
				font-size: 20rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 500;
				color: #ffffff;

				.jindushangshi {
					position: absolute;
					width: 100%;
					height: 24rpx;
					background-color: #36b542;
					line-height: 24rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #ffffff;
					border-radius: 16rpx;
				}
			}
		}

		.priceUp {
			width: 406rpx;
			height: 70rpx;
			position: absolute;
			top: 16rpx;
			left: 10rpx;
		}

		.guid {
			width: 750rpx;
			height: 150rpx;
		}

		.cart {
			position: fixed;
			bottom: 200rpx;
			right: 60rpx;
			background-color: #FFFFFF;
			border-radius: 50rpx;
			width: 90rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.cart-s {
				position: relative;
			}

			image {
				width: 60rpx;
				height: 55rpx;
			}

			.alarm {
				position: absolute;
				color: white;
				font-size: 17rpx;
				background-color: red;
				/*height: 24px;改前*/
				min-height: 24rpx;
				/*改后新增的代码*/
				min-width: 40rpx;
				/*改后新增的代码*/
				line-height: 24rpx;
				// right: -25%;
				top: -16rpx;
				left: 30rpx;
				text-align: center;
				-webkit-border-radius: 24rpx;
				border-radius: 24rpx;
				padding: 8rpx;
			}
		}

		.test-bottom {
			width: 436rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 156rpx;
				height: 64rpx;
				position: relative;
				top: 15rpx;
			}
		}
	}
</style>
